.x-full {
  width: 100%;
}

.y-full {
  height: 100%;
}

.x-min-full {
  min-width: 100%;
}

.x-max-full {
  max-width: 100%;
}

.y-max-full {
  max-height: 100%;
}

.y-min-full {
  min-height: 100%;
}


@sizeWidthEmList: 1, 2, 3, 4, 6, 8, 9, 10, 12, 14, 16, 20, 24, 30, 34, 36;

each(@sizeWidthEmList, {
    .w\:@{value} {
      width: unit(@value, em);
    }

    .h\:@{value} {
      height: unit(@value, em);
    }

    .min-w\:@{value} {
      min-width: unit(@value, em);
    }

    .min-h\:@{value} {
      min-height: unit(@value, em);
    }

    .max-w\:@{value} {
      max-width: unit(@value, em);
    }

    .max-h\:@{value} {
      max-height: unit(@value, em);
    }

    .line-h\:@{value} {
      line-height: unit(@value, em);
    }
  }

);


.w\:2\/1 {
  width: calc(100% /2);
}

.w\:4\/1 {
  width: calc(100% /4);
}


@marginPaddingSize: 2, 4, 5, 6, 8, 9, 10, 12, 14, 16, 18, 20, 24, 26, 32, 34, 35, 36, 38, 40;

each(@marginPaddingSize, {
    .padding\:@{value} {
      padding: unit(@value, px);
    }

    .pl\:@{value} {
      padding-left: unit(@value, px);
    }

    .pr\:@{value} {
      padding-right: unit(@value, px);
    }

    .pt\:@{value} {
      padding-top: unit(@value, px);
    }

    .pb\:@{value} {
      padding-bottom: unit(@value, px);
    }

    .py\:@{value} {
      padding-top   : unit(@value, px);
      padding-bottom: unit(@value, px);
    }

    .px\:@{value} {
      padding-left : unit(@value, px);
      padding-right: unit(@value, px);
    }

    .margin\:@{value} {
      margin: unit(@value, px);
    }

    .ml\:@{value} {
      margin-left: unit(@value, px);
    }

    .mr\:@{value} {
      margin-right: unit(@value, px);
    }

    .mt\:@{value} {
      margin-top: unit(@value, px);
    }

    .mb\:@{value} {
      margin-bottom: unit(@value, px);
    }

    .my\:@{value} {
      margin-top   : unit(@value, px);
      margin-bottom: unit(@value, px);
    }

    .mx\:@{value} {
      margin-right: unit(@value, px);
      margin-left : unit(@value, px);
    }
  }

);